<template>
    <el-cascader :id="id" v-if="shows" :props="options" :style="styles" v-model="currentValue" @visible-change="visibleChange" :disabled="disabled"  class='citySelect' ref="citySelect"></el-cascader>
</template>
<script>
import Vue  from 'vue'
import { TextHighlightRules } from 'vue-json-editor/assets/jsoneditor';
let sef=this;
export default {
    props:['id','styles','value','data','extype','isreadonly','exkey','appid','extype','isSearch','index','isjs','fontSize','dataField'],
   // props:['data','appid','index','attribute'],
    name: "city-select",
    inject:["setCarMapPointer"],    //接收一个方法
    data(){
        return {
            shows:true,
           currentValue:this.value,
           currentValueOld:"",
           level_target:'2',
            disabled:false,
            exkeys:[],
            xzCity:"",
            first:'Y',
            isLabel:"N",
            p:'',
            cId:'',
            isreadonlys:'',
            defval:"",
           /* id:"",
            styles:"",
            value:"",
            extype:"",
            isreadonly:"",
            exkey:"",
            isSearch:"",
            isjs:"",*/
            setData:[],
            options: {
                lazy: true,
                disabled:false,
                checkStrictly:this.isSearch=='Y' ? true:false,
                lazyLoad (node, resolve) { 
                    let level=node.level;
                    let value=node.value;
                    
                    let pId="0";
                    if(value){
                        let values=value.split("#");
                        if(values.length>1){
                            pId=values[1];  
                        }
                    }
                   
                    sef.$post("api","api/common/getCity",{pId:pId,level_source:""+level,level_target:sef.level_target,isjs:sef.isjs,extype:escape(sef.extype),xzCity:sef.xzCity}).then(data=>{
                        resolve(data);
                    });
                    
                  
                    
                }
            }
        }
    }, 
    mounted(){
            
            try{
                this.$refs.citySelect.$parent.$parent.$children[0].$el.style.fontSize=this.fontSize
            }catch(e){}
            this.$nextTick(() => {
                const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]');
                Array.from($el).map((item) => item.removeAttribute('aria-owns'));
            });
        },
    beforeCreate(){
        sef=this;
    },
    created(){
       /* if(this.attribute.id){
            this.id=this.attribute.id;
        }
        if(this.attribute.styles){
            this.styles=this.attribute.styles;
        }
        if(this.attribute.value){
            this.value=this.attribute.value;
        }
        if(this.attribute.extype){
            this.extype=this.attribute.extype;
        }
        if(this.attribute.isReadOnly){
            this.isreadonly=this.attribute.isReadOnly;
        }
        if(this.attribute.exkey){
            this.exkey=this.attribute.exkey;
        }
        if(this.attribute.isSearch){
            this.isSearch=this.attribute.isSearch;
        }
        if(this.attribute.isjs){
            this.isjs=this.attribute.isjs;
        }
       
        if(this.exkey){
            this.exkeys=this.exkey.split("#")
            this.level_target=this.exkeys[this.exkeys.length-1];
        }else{
            this.level_target="2";
        }*/
        console.log("this.exkey======================================");
        console.log(this.exkey)
        if(this.exkey){
            if(typeof this.exkey=='object'){
                
                this.exkeys=this.exkey.data.split("#")
                console.log("isreadonlys=================")
                //try{
                    if(this.exkey.readonlys){
                        for(let i=0;i<this.exkey.readonlys.length;i++){
                            console.log(this.exkey.readonlys[i])
                            let id=this.exkey.readonlys[i].id.split(".");
                            console.log("id===="+id[0]+"=="+id[1])
                            let opr=this.exkey.readonlys[i].opr;
                            let vals=this.exkey.readonlys[i].val;
                            let val_=this.data[id[0]][id[1]];
                            if(opr=="等于"&&vals==val_){
                                this.isreadonlys="Y";
                            }
                            if(opr=="不等于"&&vals!=val_){
                                this.isreadonlys="Y";
                            }

                        }
                    }
               // }catch(e){}
               try{
                 this.setData=this.exkey.setData;
               }catch(e){}
            }else{
                this.exkeys=this.exkey.split("#")
            }
            
            this.level_target=this.exkeys[this.exkeys.length-1];

            try{
                this.xzCity=this.exkey.xzCity
            }catch(e){}
            try{
                this.isLabel=this.exkey.isLabel;
            }catch(e){}
            try{
                this.defval=this.exkey.defval
            }catch(e){}
        }else{
            this.level_target="2";
        }
        let ids=this.id.split(".");
        if(ids.length>1){

            let p=ids[0];
            this.p=p;
            let id_=ids[1];
            this.cId=id_;
            if(this.isSearch!='Y'){
                
                if(this.index||this.index=="0"){
                    //alert(this.data[p][this.index][id_])
                    console.log(this.data[p][this.index])
                    this.currentValue=this.data[p][this.index][id_].split(",");
                }else{
                    this.currentValue=this.data[p][id_].split(",");
                }
                
            }
            
        }else if(this.dataField){
            this.currentValue=this.data[this.dataField][this.index][this.id].split(",");
        }
       // alert(this.defval+"=="+this.currentValue+"=="+this.id+"=="+this.dataField)
        if(!this.currentValue&&this.defval){
            this.currentValue=this.defval.split(",")
        }
        if(this.extype=="checkStrictly"){
            this.options.checkStrictly=true;
        }
       
        if(this.isreadonly=='Y'||this.isreadonlys=='Y')
            this.disabled=true;
        //alert(this.disabled+"=="+this.isreadonlys)
       
    },
    methods:{
        visibleChange() {
            this.$nextTick(() => {
                // 添加这段代码
                const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]');
                Array.from($el).map((item) => item.removeAttribute('aria-owns'));
            });
        },
    },
    watch:{
        currentValue: function (val) { //currentValue值变动就向父组件传值
            console.log(val,"val===========ss===")
            let vals="";
            let labels="";
             if(this.first=='Y'){
                this.currentValueOld=this.currentValue;
                this.first='N';
            }
            if(this.currentValueOld==this.currentValue){
                return;
            }
            this.GLOBAL.isChange=true;
            for(let i=0;i<val.length;i++){
                vals=vals=="" ? val[i]:vals+","+val[i];
                console.log("val======="+this.id+"="+val[i])
                let vals_=val[i].split("#");
                labels=labels=="" ? vals_[0]:labels+vals_[0]
            }
            //alert(this.index+"="+this.p+"="+this.cId)
            if(this.isSearch=='Y'){
                console.log("this.search==================="+this.index);
                console.log(this.data)
                if(this.isLabel=="Y"){
                    this.$set(this.data[this.index],"vals",labels)
                }else
                    this.$set(this.data[this.index],"vals",vals)
            }else if(this.dataField){
                this.$set(this.data[this.dataField][this.index],this.id,vals);
            }else{
                if(this.index||this.index=="0"){
                    
                    this.$set(this.data[this.p][this.index],this.cId,vals);
                }else{
                    this.$set(this.data[this.p],this.cId,vals);
                }
            }
                

            /*let data={};
            data.id=this.id;
            data.val=vals;
        
            
        
            this.$emit('input',JSON.stringify(data));
            this.$emit('on-change',JSON.stringify(data));*/
            console.log(this.exkeys,"this.exkeys=====")
            if(this.exkeys&&this.exkeys.length>0){
                let vals_="";
                for(let i=0;i<val.length;i++){
                    vals_=vals_=="" ? val[i].split("#")[0]:vals_+""+val[i].split("#")[0];
                    let vals__=val[i].split("#")[0]
                    if(i<this.exkeys.length){
                       /* let data={};
                        data.id=this.p+"."+this.exkeys[i];
                        data.val=val[i];
                        this.$emit('input',JSON.stringify(data));
                        this.$emit('on-change',JSON.stringify(data));
                        */
                        if(this.dataField){
                            this.$set(this.data[this.dataField][this.index],this.exkeys[i],vals__);
                        }else if(this.index||this.index=="0"){
                            this.$set(this.data[this.p][this.index],this.exkeys[i],vals__);
                        }else
                            this.$set(this.data[this.p],this.exkeys[i],vals__);
                    }
                }
                
                let index=val.length;
                for(let i=index;i<this.exkeys.length-2;i++){
                    if(this.dataField){
                        this.$set(this.data[this.dataField][this.index],this.exkeys[i],"");
                    }else if(this.index||this.index=="0"){
                        this.$set(this.data[this.p][this.index],this.exkeys[i],"");
                    }else
                        this.$set(this.data[this.p],this.exkeys[i],"");
                }
                if(this.exkeys[this.exkeys.length-2]){
                   /* let data={};
                    data.id=this.p+"."+this.exkeys[this.exkeys.length-2];
                    data.val=vals_;
                    this.$emit('input',JSON.stringify(data));
                    this.$emit('on-change',JSON.stringify(data));*/
                    if(this.dataField){
                        this.$set(this.data[this.dataField][this.index],this.exkeys[this.exkeys.length-2],vals_);
                    }else if(this.index||this.index=="0"){
                        this.$set(this.data[this.p][this.index],this.exkeys[this.exkeys.length-2],vals_);
                    }else
                        this.$set(this.data[this.p],this.exkeys[this.exkeys.length-2],vals_);
                }
            }
            if(this.setData){
                console.log(this.setData,"this.setData")
                for(let i=0;i<this.setData.length;i++){
                    let scrField=this.setData[i].scrField.split(".");
                    let dstField=this.setData[i].dstField.split(".");
                    let condition=this.setData[i].condition;
                    let sets=true;
                    if(condition){
                        for(let j=0;j<condition.length;j++){
                            let field=condition[j].field.split(".");
                            let opr=condition[j].opr;
                            let val=condition[j].val;
                            let val_=this.data[field[0]][field[1]]
                            if(opr=="等于"&&val!=val_){
                                sets=false;
                            }
                            if(opr=="不等于"&&val==val_){
                                sets=false;
                            }
                        }
                    }
                    if(sets){
                        this.$set(this.data[dstField[0]],dstField[1],this.data[scrField[0]][scrField[1]])
                    }
                }
            }
            try{
                if(this.exkey&&this.exkey.setMapPointer){
                    let url=this.exkey.setMapPointer.url;
                    let labels_=labels;
                    if(this.exkey.setMapPointer.params){
                        let params=this.exkey.setMapPointer.params.split(",");
                        let pre=this.exkey.setMapPointer.pre;
                        for(let h=0;h<params.length;h++){
                            labels_+=this.data[pre][params[h]]
                        }
                    }
                    

                    
                    console.log(this.exkey,"ssss")
                    console.log("exkey=======================sss==labels========="+labels_+"=="+url)
                    this.$post("",url,{"address":labels_}).then(data=>{
                        this.setCarMapPointer(data.lng,data.lat,labels_)
                    })
                    
                    /*this.$post("",url,{"address":labels}).then(data=>{
                        this.setCarMapPointer(data.lng,data.lat,labels)
                    })*/
                }
            }catch(e){}
            //选择后需要发送后台，然后根据返回值赋值
           // try{
                //{'changePost':{'url':'/bygex/jdzh/countmoney','params':[{'key':'province','field':'zo_ex8','pre':'zo','isEmpty':'N'},{'key':'city','field':'zo_ex9','pre':'zo','isEmpty':'N'},{'key':'Kilometre','field':'zo_ex20','pre':'zo','isEmpty':'N'},{'key':'discountType','field':'zo_ex21','pre':'zo'},{'key':'toll','field':'zo_ex46','pre':'zo'}],'setData':[{'srcField':'money','dstField':'zo.zo_ex23'}]}}
                console.log(this.exkey,"changePost==============================")
                if(this.exkey&&this.exkey.changePost){
                    let url=this.exkey.changePost.url;
                    let params=this.exkey.changePost.params;
                    let paramss={};
                    let setData=this.exkey.changePost.setData;

                    let isOk=true;
                    params.forEach(item=>{
                        let key =item.key;
                        let field=item.field.split(",");
                        let isEmpty=item.isEmpty;
                        let pre=item.pre;
                        let val="";
                        field.forEach(ff=>{
                           let val_= this.data[pre][ff]
                           val+=val_;
                        })
                        if(isEmpty=="N"&&!val){
                            isOk=false;
                        }
                        paramss[key]=val;
                    })
                    if(isOk){
                        this.$post("",url,paramss).then(data=>{
                            setData.forEach(item=>{
                                let dstField=item.dstField.split(".");
                                let srcField=item.srcField;
                                this.$set(this.data[dstField[0]],dstField[1],data[srcField]);
                            })
                        })
                    }
                }


           // }catch(e){}
            
        },
        value:function (val) { //对值进行验证
            
        },
        data:{
            handler: function (newVal) {
                console.log("changedATA====================")
                if(this.first!='Y'){
                    console.log("changedATA====================11")
                    if(!this.index&&this.index!="0"){
                        if(this.currentValue.join(",")!=this.data[this.p][this.cId]){
                            this.shows=false;
                            window.setTimeout(()=>{
                                this.currentValue=this.data[this.p][this.cId].split(",")
                                this.shows=true;
                                console.log(this.currentValue,"currentValue===========")
                            },500)
                            
                        }
                    }
                    
                }
               
            },
            deep:true
        }
    }
}
</script>
<style >
.el-cascader{
    width:100%;
}

</style>
<style >
.el-cascader-menu__wrap{
    height:360px;
}
</style>